<template>
  <div v-loading="isRequesting">
    <!-- 表单 -->
    <el-form
      class="g-advance-drawer-form"
      label-width="96px"
      :model="formData"
      size="mini"
      style="width:90%"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('Issue.issueName')">
            <el-input
              v-model="formData.issueName"
              clearable
              :placeholder="$t('input.placeholder')"
              :rows="2"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- 问题类型 -->
        <el-col :span="6">
          <el-form-item :label="$t('Issue.issueType')">
            <el-select
              v-model="formData.issueType"
              clearable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('IssueType')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 创建人 -->
        <el-col :span="6">
          <el-form-item :label="$t('Issue.issueCreateUser')">
            <el-select
              v-model="formData.issueCreateUser"
              clearable
              filterable
              :placeholder="$t('Issue.issueCreateUser')"
            >
              <el-option
                v-for="item in $store.getters['user/getUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 负责人 -->
        <el-col :span="6">
          <el-form-item :label="$t('Issue.issueAppointUser')">
            <el-select
              v-model="formData.issueAppointUser"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['user/getUserSimpleCollects']"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              >
                <span style="float: left;">{{ item.userName }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.team }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 预计解决时间 -->
        <el-col :span="6">
          <el-form-item :label="$t('Issue.issueEstimateTime')">
            <el-date-picker
              v-model="formData.issueEstimateTime"
              :picker-options="pickerOptions"
              :placeholder="$t('select.date')"
            />
          </el-form-item>
        </el-col>
        <!-- 优先级别 -->
        <el-col :span="6">
          <el-form-item :label="$t('Issue.issueLevel')">
            <el-select
              v-model="formData.issueLevel"
              clearable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('IssueLevel')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 备注信息 -->
        <el-col :span="24">
          <el-form-item :label="$t('Issue.issueRemark')">
            <el-input
              v-model="formData.issueRemark"
              clearable
              :placeholder="$t('input.placeholder')"
              :rows="3"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 按钮 -->
    <div class="btn-list">
      <el-button icon="el-icon-view" size="mini" type="success" @click="viewDialogVisible = true">
        {{ $t('button.viewRichText') }}
      </el-button>
      <el-button icon="el-icon-edit-outline" size="mini" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </div>
    <!-- 富文本 -->
    <div class="rich-text">
      <quill-editor :content="issueDesc" :options="editorOption" @change="onEditorChange($event)" />
    </div>
    <!-- 预览 -->
    <BaseDialog
      v-if="viewDialogVisible"
      :title="$t('button.viewRichText')"
      :visible.sync="viewDialogVisible"
      width="60%"
    >
      <ViewRichText :issueDesc="issueDesc" />
    </BaseDialog>
  </div>
</template>
<script>
const titleConfig = {
  'ql-bold': '加粗',
  'ql-color': '颜色',
  'ql-font': '字体',
  'ql-code': '插入代码',
  'ql-italic': '斜体',
  'ql-link': '添加链接',
  'ql-background': '背景颜色',
  'ql-size': '字体大小',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-underline': '下划线',
  'ql-blockquote': '引用',
  'ql-header': '标题',
  'ql-indent': '缩进',
  'ql-list': '列表',
  'ql-align': '文本对齐',
  'ql-direction': '文本方向',
  'ql-code-block': '代码块',
  'ql-formula': '公式',
  'ql-image': '图片',
  'ql-video': '视频',
  'ql-clean': '清除字体样式',
  'ql-upload': '文件'
}
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { issueAdd } from '@/api/sys/issue'
import ViewRichText from '@/widgets/ViewRichText'
export default {
  name: 'CreatIssue',
  components: { quillEditor, ViewRichText },
  data() {
    return {
      isRequesting: false,
      formData: {
        issueCreateUser: this.$store.getters['user/getSessionUser'].userId,
        issueAppointUser: this.$store.getters['user/getSessionUser'].userId,
        issueEstimateTime: null
      },
      issueDesc: '',
      /** 富文本的基本配置 */
      editorOption: {
        placeholder: '请输入问题描述信息'
      },
      viewDialogVisible: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  created() {
    this.fetchDate()
  },
  mounted() {
    this.toolbarTip()
  },
  methods: {
    toolbarTip() {
      const oToolBar = document.querySelector('.ql-toolbar')
      const aButton = oToolBar.querySelectorAll('button')
      const aSelect = oToolBar.querySelectorAll('select')
      aButton.forEach(function(item) {
        if (item.className === 'ql-script') {
          item.value === 'sub' ? (item.title = '下标') : (item.title = '上标')
        } else if (item.className === 'ql-indent') {
          item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')
        } else {
          item.title = titleConfig[item.classList[0]]
        }
      })
      aSelect.forEach(function(item) {
        item.parentNode.title = titleConfig[item.classList[0]]
      })
    },
    async save() {
      try {
        await this.$confirmBox(this.$t('button.save'), 'success')
        this.isRequesting = true
        await issueAdd(
          { ...this.formData, issueDesc: this.issueDesc },
          { msgSuccess: true, msgError: true }
        )
        this.afterSave()
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 保存之后重置表单
    afterSave() {
      this.formData = {
        issueCreateUser: this.$store.getters['user/getSessionUser'].userId,
        issueAppointUser: this.$store.getters['user/getSessionUser'].userId
      }
      this.fetchDate()
      this.issueDesc = ''
    },
    /** 富文本内容变化的监听 */
    onEditorChange(e) {
      this.issueDesc = e.html
    },

    fetchDate() {
      // 设置时间选择器默认时间
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
      this.formData.issueEstimateTime = date
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-list {
  width: 90%;
  display: flex;
  justify-content: flex-end;
  padding-left: 30px;
}
.rich-text {
  width: 91%;
  height: 600px;
  padding-left: 30px;
  padding-top: 20px;
  padding-bottom: 60px;
}
.quill-editor {
  height: 100%;
  text-align: left;
}
</style>
